<!--  岗位详情 -->
<template>
  <el-link
    style="margin-right: 20px"
    type="primary"
    :underline="false"
    @click="() => (dialogVisible = true)"
    >查看岗位详情</el-link
  >
  <el-dialog
    v-model="dialogVisible"
    title=""
    width="1200"
    :before-close="close"
  >
    <div class="gsjs">
      <div style="width: 600px">
        <h2 style="margin-top: 0">公司介绍</h2>
        <div class="jsnr">
          {{ data.companyProfile }}
        </div>
      </div>
      <div style="width: 200px; padding: 10px; background-color: #f9fafb">
        <h2 style="margin-top: 0">公司规模</h2>
        <div class="jsnr">{{ data.companyScale }}人</div>
      </div>
      <div style="width: 200px; padding: 10px; background-color: #f9fafb">
        <h2 style="margin-top: 0">所属行业</h2>
        <div class="jsnr">{{ data.companyIndustry }}</div>
      </div>
    </div>
    <div class="gwyq">
      <div>
        <h2 style="margin-top: 0">
          {{ data.postName }}&emsp;&emsp;<span style="color: red"
            >{{ data.salaryMin }}-{{ data.salaryMax }}元/月</span
          >
        </h2>
      </div>
      <div style="margin-top: 10px" class="jsnr">{{ data.workLocation }}</div>
      <div>
        <h3 style="margin-top: 20px">工作内容</h3>
        <div>{{ data.postContent }}</div>
      </div>
      <div>
        <h3 style="margin-top: 20px">岗位要求</h3>
        <div>{{ data.postRequirements }}</div>
      </div>
      <div>
        <h3 style="margin-top: 20px">招聘要求</h3>
        <div>
          <el-tag>{{ data.qualification }}</el-tag>
          <el-tag style="margin-left: 5px">{{ data.workYears }}</el-tag>
        </div>
      </div>
      <div>
        <h3 style="margin-top: 20px">公司福利</h3>
        <div>
          <el-tag
            v-for="item in data.welfare.split(',')"
            :key="item"
            style="margin-right: 5px"
            >{{ item }}</el-tag
          >
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          @click="apply"
          v-if="userStore.userInfo?.role == 1"
        >
          发起申请
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { reqApplyJob } from "@/api/api";
import { useUserStore } from "@/stores/userInfo";
import { ElMessage } from "element-plus";
const userStore = useUserStore();
const dialogVisible = ref(false);
const props = defineProps({
  JobId: {
    type: Number,
    default: 0,
  },
  job: {
    type: Object,
    default: () => {},
  },
  reload: {
    type: Function,
    default: () => {},
  },
});
const data = props.job;

const close = () => {
  dialogVisible.value = false;
};

const apply = async () => {
  const res = await reqApplyJob(props.JobId);
  if (res.code == 200) {
    ElMessage.success("申请成功");
    dialogVisible.value = false;
    props.reload();
  } else {
    ElMessage.error(res.msg);
  }
};
</script>
<style lang="scss" scoped>
.gsjs {
  border: 1px solid #e5e7eb;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jsnr {
  color: #4b5563;
  font-size: 16px;
}
.gwyq {
  margin-top: 20px;
  border: 1px solid #e5e7eb;
  padding: 20px;
}
</style>
